<template>
  <div class="wrap">
    <div class="top">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      <el-time-picker
        v-model="fromtime"
        :picker-options="{
      selectableRange: '07:00:00 - 22:00:00'
    }"
        placeholder="任意时间点">
      </el-time-picker>
      <el-time-picker
        v-model="totime"
        :picker-options="{
      selectableRange: '07:00:00 - 22:00:00'
    }"
        placeholder="任意时间点">
      </el-time-picker>
      <el-button type="primary" icon="el-icon-search"  @click="getseat">搜索</el-button>
    </div>
    <!--    111111111111-->
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="1000">
        <el-table-column
          prop="jsld"
          label="教室楼栋"
          width="300">
        </el-table-column>
        <el-table-column width="120"></el-table-column>
        <el-table-column
          prop="jsfh"
          label="教室房号"
          width="400">
        </el-table-column>
        <el-table-column
          prop="jszws"
          label="总座位数"
          width="300">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="getRow(scope.$index, tableData)"
              type="info"
              size="small">
              预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>



</template>

<script>

  import { getappointmentroom, appointmentroom} from '@/api/teacher/index'

  export default {

    data() {
      return {
        seat: null,
        listLoading: true,
        date: '',
        fromtime: '',
        totime: '',
        tableData: [],
        getroomid: Object,
        getroom: {},
        currentPage: 1,
        total:1,
        pageSize:5,
        pageNum: 1
      }
    },
    created() {

    },
    methods: {
      handleSizeChange(val) {
        this.pageSize=val;
        this.getseat();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getseat()
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      //搜索必须全输入 不然就调用该方法弹窗
      //预约提示变量 1搜索提示信息 2预约成功提示 3预约失败提示
      open(tips) {
        if (tips == 1) {
          this.$alert('<strong> 需 要 输 入 三 个 完 整 的 时 间 </strong>', '操作错误！', {
            dangerouslyUseHTMLString: true
          })
        }else if (tips == 2) {
          this.$alert('<strong> 预 约 成 功 ! </strong>', '成功', {
            dangerouslyUseHTMLString: true
          })
        }else {
          this.$alert('<strong> 预 约 失 败 ! </strong>', '失败', {
            dangerouslyUseHTMLString: true
          })
        }
      },

      //时间格式化 var createtime=new Date(data[i].createtime)
      formatTen(num) {
        return num > 9 ? (num + "") : ("0" + num);
      },
      formatdate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)
      },
      formatfromtime(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        // return this.formatTen(hour)+":"+this.formatTen(minute)+":"+this.formatTen(second);
        return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)+" "+this.formatTen(hour)+":"+this.formatTen(minute)+":"+this.formatTen(second)
        // return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)
      },

      //根据选择时间搜索可预约教室
      getseat() {
        if (this.date && this.fromtime && this.totime) {
          getappointmentroom(this.date,this.fromtime,this.totime,this.pageNum,this.pageSize).then( res =>{
            this.tableData = res.data.classroom
            this.total = res.data.total
            // console.log(this.tableData)
          }).catch(err => {
            console.log('获取教室数据失败',err)
          })
        }else {
          //时间没填完整的操作
          this.open(1)
          return
        }
      },
      //得到该行信息 进行预约
      getRow(index, rows) {
        //获取预约日期
        let createdate=new Date(this.date);
        this.date = this.formatdate(createdate)
        // console.log(this.date)

        //获取预约开始时间
        let createfromtime = new Date(this.fromtime)
        this.fromtime = this.formatfromtime(createfromtime)
        // console.log(this.fromtime.slice(11))

        //获取预约结束时间
        let createtotime = new Date(this.totime)
        this.totime = this.formatfromtime(createtotime)
        // console.log(this.totime.slice(11))

        //点击预约得到预约的教室id getroomid
        this.getroomid = rows.slice(index, index + 1)[0].jsid
        appointmentroom(this.getroomid,this.date,this.fromtime.slice(11),this.totime.slice(11)).then( res => {
          this.open(2)
          console.log(res,'预约成功了')
        }).catch(err=>{
          this.open()
          console.log(err,'预约有错误')
        })
      }

    }
  }
</script>


<style lang="scss" scoped>
  .wrap{
    width: 1400px;
    height: 100%;
    margin-left: 5%;
    margin-top: 2%;
    /*background-color: #3a835d;*/
  }
  .top{
    padding-left: 36%;
    width: 100%;
  }
  .el-table{
    width: 100%;
  }
  .el-table::before {
    left: 0;
    bottom: 0;
    width: 90%;
    height: 1px;
  }

</style>
